<template>
  <!-- 机票列表页 -->
  <section class="contianer">
    <el-row type="flex" justify="space-between">
      <!-- 顶部过滤列表 -->
      <div class="flights-content">
        <!-- 1.过滤条件 -->
        <div>
          <flightsFilters
            v-if="flightData"
            :info="flightData.info"
            :options="flightData.options"
            :flights="newList"
            @toFliter="toFliter"
          />
        </div>
        <!-- 2.航班头部布局 -->

        <flightsListHead></flightsListHead>

        <!-- 3.航班信息 -->
        <div>
          <flightsItem :data="item" v-for="item in dataList" :key="item.id"></flightsItem>
          <el-row type="flex" justify="center" style="margin-top:10px">
            <!-- 饿了么分页
            current-change:点击当前页触发
            size-change：每页条数改变触发
            -->
            <el-pagination
              v-if="flightData.flights"
              @current-change="currentChange"
              @size-change="sizeChange"
              :current-page="pageIndex"
              :page-size="pageSize"
              :page-sizes="[5,10,15,20]"
              background
              layout="sizes,prev, pager, next,jumper,total"
              :total="flightData.flights.length"
            ></el-pagination>
          </el-row>
        </div>
      </div>

      <!-- 4.侧边栏-历史记录 -->
      <div class="aside">
        <div>
          <historyPage />
        </div>
      </div>
    </el-row>
  </section>
</template>

<script>
//1.引入航班列表头部组件
import flightsListHead from "@/components/air/flightsListHead";
//2.引入机票列表组件
import flightsItem from "@/components/air/flightsItem";
//3.引入机票筛选组件
import flightsFilters from "@/components/air/flightsFilters";
//4.引入侧边历史记录组件
import historyPage from "@/components/air/historyPage";
//5.引入时间插件
import moment from "moment";
export default {
  //组件注册
  components: {
    flightsListHead,
    flightsItem,
    flightsFilters,
    historyPage
  },
  data() {
    return {
      //航班总数据
      flightData: {
        flights: [],
        info: {},
        options: {}
      },
      //当前页码
      pageIndex: 1,
      //页面数据长度
      pageSize: 5,
      //机票筛选后的渲染数据
      newList: []
    };
  },
  //监听
  watch: {
    //监听页面的路由变化
    $route() {
      // console.log("路由发生变化");
      //获取航班数据
      this.loadPage();
    }
  },
  //声明周期
  created() {
    //获取航班数据
    this.loadPage();
  },
  //计算属性
  computed: {
    dataList() {
      if (this.flightData.flights) {
        let formIndex = (this.pageIndex - 1) * this.pageSize;
        let toIndex = formIndex + this.pageSize;
        return this.flightData.flights.slice(formIndex, toIndex);
      }
    }
  },
  //方法
  methods: {
    //获取航班数据
    loadPage() {
      this.$axios({
        url: "/airs",
        params: this.$route.query
      }).then(res => {
        // console.log(res.data);
        this.flightData = { ...res.data };
        this.newList = res.data.flights;
        console.log("newList");
        console.log(this.newList);
      });
    },

    //当前页点击事件
    currentChange(val) {
      //选择当前页，需要修改数据pageIndex
      this.pageIndex = val;
    },
    //每页条数改变
    sizeChange(val) {
      this.pageSize = val;
    },
    //子传父,筛选功能
    toFliter(newList) {
      console.log(newList);
      //替换当前的渲染数据

      this.flightData.flights = newList;

      console.log("子传父成功");
    }
  }
};
</script>

<style lang="less" scoped>
.contianer {
  width: 1000px;
  margin: 20px auto;
  .flights-content {
    width: 745px;
    font-size: 14px;
  }
  //侧边栏
  .aside {
    width: 240px;
  }
}
</style>